import React from 'react';
import {Button} from 'antd-mobile';
import {inject, observer} from 'mobx-react';

import './index.scss';

/**
 * 订单页面
 * @inject    用来将Store添加到组件的属性中。参数一为Store的名称。
 * @observer  用来声明组件为mobx的观察者。当Store的可观察属性改变时，刷新页面。注意：先使用@inject，后使用@observer。
 */
@inject('store')
@observer
export default class Order extends React.Component {
  //构造函数
  constructor(props) {
    super(props);
    //使用state保存数据
    this.state = {};
  }

  //界面渲染函数
  render() {
    return (
      <div className="order">
        <Button onClick={this.addData}>新增</Button>
        {this.renderList()}
      </div>
    );
  }

  componentDidMount() {
    console.log(this.props)
  }

  /**
   * 加载列表
   */
  renderList() {
    let {dataList} = this.props.store.order;
    return dataList.map((item, index) => {
      return (
        <div key={index}>
          <span>{item.title}</span>
          <Button onClick={() => this.deleteData(index)}>删除</Button>
        </div>
      );
    });
  }

  addData = () => {
    let {dataListLength, addData} = this.props.store.order;
    let data = {title: `Ant Design Title ${dataListLength}`};
    addData(data);
  };

  deleteData = (index) => {
    this.props.store.order.deleteData(index);
  };
}
